<!--这是添加讲师组件-->
<template>
	<div>
		<p class="filter"></p>
		<div class="addBox">
			<h3 class="fixTitle" style="z-index: 100; height: 36px;">
				<span>添加讲师</span>
				<p>
          <em style="cursor: pointer;" @click="closeAdd"><svg-icon icon-class="cha" class="font-size16" /></em>
        </p>
			</h3>
			<div style="padding: 20px;">
				<div style="margin-top: 40px;border-top: 1px solid #eee;padding-top: 10px;">
					<el-input v-model="userName" clearable placeholder="请输入用户昵称或 手机号" style="width: 200px;"></el-input>
					<el-button type="success" icon="el-icon-search">搜索</el-button>
					<p class="userList">
						<el-checkbox v-model="checked" style="float: left;width: 80px;line-height: 32px;margin-right: 20px;"></el-checkbox>
						<span><img :src="user.img" /></span><b>{{user.name}}</b>
					</p>
				</div>
				<p v-if="permission == 3" style="text-align: center;line-height: 80px;">
					<el-button type="primary" icon="el-icon-check">保存</el-button>
					<el-button type="info" @click="closeAdd">取消</el-button>
				</p>
			</div>
		</div>
	</div>
</template>
<script>
import Sticky from '@/components/Sticky'
import { getManager } from '@/api/social'
import { interaction_social } from '@/utils/permission'
export default {
  components: {
    Sticky
  },
  data() {
    return {
      permission: 3,
      checked: null,
      userName: '',
      user: {
        id: 0,
        img: '../../../../build/logo.png',
        name: 'Xxxxx'
      }
    }
  },
  mounted() {
    this.getModelPermission()
  },
  methods: {
    getModelPermission() {
      this.permission = interaction_social()
    },
    getTeacher() {
      getManager(this.userName).then(res => {
        console.log(res.data.data)
          this.users = res.data.data
          console.log(this.users)
      }).catch(err => {
        console.log('1111')
        console.log(err)
      })
    },
    closeAdd() {
      this.$emit('hideAddTeacher', false)
    }
  }
}
</script>
<style scoped>
	p,h3 {margin:0;padding:0}
	.addBox {
		width: 500px;
		height: 400px;
		overflow: auto;
		background: #fff;
		position: absolute;
		left: 40%;
		top: 15%;
		z-index: 120;
	}
	.fixTitle{
    width: 500px;
    padding-left: 20px;
	}
	.title{
		font-size: 18px;
		line-height: 30px;
		margin-top: 40px;
	}
	label {
		font-weight: 500;
		width: 190px;
		display: inline-block;
		text-align: right;
		margin-right: 30px;
	}
	form p {
		height: 50px;
		line-height: 50px;
		overflow: hidden;
	}
	.userList span{
		float: left;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		overflow: hidden;
		display: inline;
		margin-right: 10px;
		background: #ccc;
	}
	.userList span img{
		width: 30px;
		height: 30px;
		vertical-align: middle;
	}
	.userList b{
		float: left;
		font-weight: 500;
	}
	.userList{
		overflow: hidden;
		zoom: 1;
		margin: 20px 0;
		line-height: 32px;
	}
</style>
